<template>
	<view class="my-slider">
		<slider :min="min" :max="max" :step="step" :value="sliderValue" :activeColor="activeColor"
			:backgroundColor="backgroundColor" :blockSize="blockSize" :blockColor="blockColor" :showValue="showValue"
			:disabled="disabled" @changing="changingHandler" @change="changeHandler"></slider>
	</view>
</template>
<script>
	export default {
		name: 'my-slider',
		computed: {
			sliderValue() {
				return this.value || this.modelValue;
			}
		},
		props: {
			value: {
				type: [Number, String],
				default: 0
			},
			modelValue: {
				type: [Number, String],
				default: 0
			},
			// 最小可选值
			min: {
				type: [Number, String],
				default: 0
			},
			// 最大可选值
			max: {
				type: [Number, String],
				default: 100
			},
			// 步长，取值必须大于 0，并且可被(max - min)整除
			step: {
				type: [Number, String],
				default: 1
			},
			// 滑块右侧已选择部分的背景色
			activeColor: {
				type: String,
				default: '#2979ff'
			},
			// 滑块左侧未选择部分的背景色
			backgroundColor: {
				type: String,
				default: '#c0c4cc'
			},
			// 滑块的大小，取值范围为 12 - 28
			blockSize: {
				type: [Number, String],
				default: 18
			},
			// 滑块的颜色
			blockColor: {
				type: String,
				default: '#ffffff'
			},
			// 禁用状态
			disabled: {
				type: Boolean,
				default: false
			},
			// 是否显示当前的选择值
			showValue: {
				type: Boolean,
				default: false
			}
		},
		methods: {
			// 拖动过程中触发
			changingHandler(e) {
				const {
					value
				} = e.detail

				// 更新v-model的值
				this.$emit('input', value.toFixed(0))
				this.$emit('update:modelValue', value)
				// 触发事件
				this.$emit('changing', value)
			},
			// 滑动结束时触发
			changeHandler(e) {
				const {
					value
				} = e.detail
				// 更新v-model的值
				this.$emit('input', value.toFixed(0))
				this.$emit('update:modelValue', value)
				// 触发事件
				this.$emit('change', value)
			}
		}
	}
</script>